<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>popup</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style type="text/css">
    .dialog-middle,.dialog-top,.dialog-bottom,.dialog-left,.dialog-right{
    	display:none;
    	background-color:white;
    	width:200px;
    	height:100px;
    	text-align:center;
    }
    /*======右上角弹出框======*/
    .app-popover{
	    width:140px;
	    padding: 1px 0;
	    border-radius: 6px;
	    background-color: white;
	    z-index: 10;
	}
	.app-popover:after {
	    content: '';
	    position: absolute;
	    top:-12px;
	    right:8px;
	    width: 0;
	    height: 0;
	    border-width: 6px;
	    border-style: solid;
	    border-color: transparent;

	    border-bottom-color: white;
	}
	.app-popover li{
	    position: relative;
	    display: -webkit-box;
	    -webkit-box-align: center;
	    -webkit-box-pack: center;
	    height: 46px;
	}
	.app-popover li:last-child:after{
	    height: 0;
	}
	.app-popover li:not(.app-rmenu-disabled):active{
	    background-color: #f8f8f8;
	}
	.app-popover li:last-child{
	    border-width: 0;
	}
	.app-popover li i{
	    pointer-events: none;
	    font-size: 22px;
	    width: 22px;
	    height: 22px;
	}
	.app-popover li label{
	    pointer-events: none;
	    -webkit-box-flex:1;
	    margin: 0 8px 0 8px;
	    height: 22px;
	    line-height: 24px;
	}
	.app-popover li:nth-of-type(1) .icon{
	    color: #32a6f8;
	}
	.app-popover li:nth-of-type(2) .icon{
	    color: #19cbc1;
	}
	.app-popover li:nth-of-type(3) .icon{
	    color: #fe721e;
	}
	.app-popover li:nth-of-type(4) .icon{
	    color: #a46ef6;
	}
	.app-popover li:nth-of-type(5) .icon{
	    color: #ff5656;
	}
	/*======分享到======*/
	.app-sharebox{
		padding:12px;
		background-color:white;
		box-sizing:border-box;
	}
	.app-shareboxTitle{
		font-size: 17px;
		text-align: center;
		padding:10px 0;
	}
	.app-shareboxClose{
		display: block;
		margin: 16px 0 12px 0;
		text-align: center;
	}
	.app-shareboxClose .icon{
		font-size: 36px;
		width: 36px;
		height: 36px;
		color: #363434;
	}
	.app-sharebox .grid{
		padding: 0 20px;
	}
	.app-sharebox li{
		padding-top: 12px;
	}
	.app-sharebox li a{
		width: 50px;
		height: 50px;
		border-radius: 100%;
		color: white;
	}
	.app-sharebox li label{
		margin-top: 6px;
	}
	.app-sharebox li a i{
		font-size: 30px;
		width: 30px;
		height: 30px;
		pointer-events:none;
	}
    </style>
</head>
<body ontouchstart="">
    <header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
            <h1 class="titlebar-title">弹出框</h1>
            
	        <div class="titlebar-right">
	        	<a class="titlebar-button" id="ID-BtnShare">
		            <i class="icon icon-share"></i>
		        </a>
	        	<a class="titlebar-button" id="ID-Popup-Menu">
		            <i class="icon icon-menudot"></i>
		        </a>
	        </div>
	        
        </div>
    </header>
    <article>
    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">系统弹出框</p>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="alertBtn">alert</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="confirmBtn">confirm</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="actionsheetBtn">actionsheet</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="toastBtn">toast</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="promptBtn">prompt</button>
        </div>
        
        <div class="card" style="padding:10px 12px;">
        	<p class="color-primary" style="padding: 0 0 6px 0;">左弹出框</p>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftTopBtn">left-top</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftMiddleBtn">left-middle</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftBottomBtn">left-bottom</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="leftFullBtn">left-full</button>
    	</div>
    	
    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">右弹出框</p>
			<button class="button" style="padding:0 8px;margin:2px 0;" id="rightTopBtn">right-top</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="rightMiddleBtn">right-middle</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="rightBottomBtn">right-bottom</button>
        	<button class="button" style="padding:0 8px;margin:2px 0;" id="rightFullBtn">right-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">上弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="topLeftBtn">top-left</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topCenterBtn">top-center</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topRightBtn">top-right</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="topFullBtn">top-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">下弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="bottomLeftBtn">bottom-left</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomCenterBtn">bottom-center</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomRightBtn">bottom-right</button>
	        <button class="button" style="padding:0 8px;margin:2px 0;" id="bottomFullBtn">bottom-full</button>
    	</div>

    	<div class="card" style="padding:10px 12px;">
    		<p class="color-primary" style="padding: 0 0 6px 0;">中弹出框</p>
    		<button class="button" style="padding:0 8px;margin:2px 0;" id="middleBtn">middle</button>
    	</div>
	</article>
	<!--自定义弹出框-->
	<div id="ID-Dialog-Mid" class="dialog-middle">中间弹出框</div>

    <div id="ID-Dialog-TopLeft" class="dialog-top">头部弹出框</div>
    <div id="ID-Dialog-TopCenter" class="dialog-top">头部弹出框</div>
	<div id="ID-Dialog-TopRight" class="dialog-top">头部弹出框</div>
	<div id="ID-Dialog-TopFull" class="dialog-top" style="width:100%">头部弹出框</div>

    <div id="ID-Dialog-BtmLeft" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmCenter" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmRight" class="dialog-bottom">底部弹出框</div>
    <div id="ID-Dialog-BtmFull" class="dialog-bottom" style="width:100%">底部弹出框</div>

    <div id="ID-Dialog-LeftTop" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftMid" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftBtm" class="dialog-left">左边弹出框</div>
    <div id="ID-Dialog-LeftFull" class="dialog-left" style="height:100%">左边弹出框</div>

    <div id="ID-Dialog-RightTop" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightMid" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightBtm" class="dialog-right">右边弹出框</div>
    <div id="ID-Dialog-RightFull" class="dialog-right" style="height:100%">右边弹出框</div>

    <!--右上角弹出框-->
	<div class="app-popover" id="ID-Popup-Popover">
		<ul>
			<li class="underline" id="ID-MeetDetail-BtnQrcode">
				<i class="icon icon-qrcodeline"></i>
				<label>扫码签到</label>
			</li>
			<li class="underline" id="ID-MeetDetail-BtnGroupChat">
				<i class="icon icon-chats"></i>
				<label>会议群聊</label>
			</li>
			<li class="underline" id="ID-MeetDetail-BtnCancel"> 
				<i class="icon icon-rdominus"></i>
				<label>取消会议</label>
			</li>
			<li class="underline" id="ID-MeetDetail-BtnFinish">
				<i class="icon icon-rdook"></i>
				<label>结束会议</label>
			</li>
			<li class="underline" id="ID-MeetDetail-BtnDel">
				<i class="icon icon-rdoclose"></i>
				<label>删除会议</label>
			</li>
		</ul>
	</div>
	<!-- 分享到-->
	<div id="ID-Dialog-Share" class="hide app-sharebox" style="width:100%">
		<div class="app-shareboxTitle">
			分享至
		</div>
		<ul class="grid" data-col="3">
			<li>
				<a class="grid-icon" style="background-color:#4485fb;" data-share="qq">
					<i class="icon icon-qq-fill"></i>
				</a>
				<label class="grid-label">QQ好友</label>
			</li>
			<li>
				<a class="grid-icon" style="background-color:#eda200;" data-share="qzone">
					<i class="icon icon-qqzone-fill"></i>
				</a>
				<label class="grid-label">QQ空间</label>
			</li>
			<li>
				<a class="grid-icon" style="background-color:#38ba35;" data-share="weixin">
					<i class="icon icon-weixin-fill"></i>
				</a>
				<label class="grid-label">微信</label>
			</li>
			<li>
				<a class="grid-icon" style="background-color:#41ce29;" data-share="fweixin">
					<i class="icon icon-fweixin-fill"></i>
				</a>
				<label class="grid-label">微信朋友圈</label>
			</li>
			<li>
				<a class="grid-icon" style="background-color:#e55f5f;" data-share="tsina">
					<i class="icon icon-tsina-fill"></i>
				</a>
				<label class="grid-label">新浪微博</label>
			</li>
			<li>
				<a class="grid-icon" style="background-color:#eecf3d;" data-share="link">
					<i class="icon icon-link-fill"></i>
				</a>
				<label class="grid-label">复制链接</label>
			</li>
		</ul>
		<div class="app-shareboxClose">
			<a class="icon icon-rdoclose" data-share="close"></a>
		</div>
	</div>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script type="text/javascript">
		//右上角弹出框
        var menupop=new Dialog("#ID-Popup-Popover",{
            position:"top-right",
            animation:"zoom",
            css:{overflow:"visible",top:"54px",right:"6px"}
        });
        document.getElementById("ID-Popup-Menu").onclick=function(){
        	menupop.show();
        }
		/*
		 * 系统弹出框
		 */
		//alert
		var popAlert=new Alert({
			html:"我是Alert框我是Alert框我是Alert框我是Alert框"
		});
	    document.getElementById("alertBtn").onclick=function(){
			popAlert.show();
	    };
		//confirm
		var popConfirm=new Alert({
			title:"提示",
			html:"我是Confirm框",
			onClickOk:function(e){
				console.log(e.target);
			},onClickCancel:function(e){
				console.log(e.target);
				e.hide();
			}
		});
		document.getElementById("confirmBtn").onclick=function(){
			popConfirm.show();
	    };
		
		//toast
		var popToast=new Toast({html:"提示信息"});
		document.getElementById("toastBtn").onclick=function(){
			popToast.show();
	    };
	    var c;
	    //actionsheet
	    var t=new Toast({html:"您点击了菜单一"});
	    var actionAlert=null;
		var actionsheet=new Actionsheet({
			data:[
				{
					text : '菜单一',
			        handler : function(s){
			        	console.log(s.target);
			        	t.setHTML("您点击了菜单一");
			        	t.show();
			        }
				},{
					text : '菜单二',
			        handler : function(s){
			        	console.log(s.target);
			        	t.setHTML("您点击了菜单二");
			        	t.show();
					}
			    },{
					text : '退出',
			        handler : function(s){
			        	if(!actionAlert){
				        	actionAlert=new Alert();
				        	actionAlert.setText("您确定要退出吗？");
				        	actionAlert.setOnClickOk(function(e){
				        		s.hide();
				        		e.hide();
				        	});
				        	actionAlert.setOnClickCancel(function(e){
				        		e.hide();
				        	});
			        	}
			        	s.hide();
						actionAlert.show();
					}
			    }
			],
			onClickCancel:function(s){
				t.setText("您点击了取消按钮");
			    t.show();
			    s.hide();
			}
		});
		document.getElementById("actionsheetBtn").onclick=function(){
			//actionsheet.setParams(actionsheetParams);
			actionsheet.show();
	    };
	    //Prompt框
	    var prompt=new Prompt();
	    document.getElementById("promptBtn").onclick=function(){
	    	prompt.setText("更新成功");
	    	prompt.show();
	    };

		//middle
		var dialogMid=new Dialog("#ID-Dialog-Mid",{
			overflowContainer:null,
			position:"middle",
			onClick:function(e){console.log(e.target)},
			onShowed:function(e){
				console.log("显示");
			},
		});

		document.getElementById("middleBtn").onclick=function(){
			dialogMid.show();
	    };
		//top
		var topLeftDialog=new Dialog("#ID-Dialog-TopLeft",{
			position:"top",
			animation:"zoom"
		});
		document.getElementById("topLeftBtn").onclick=function(){
			topLeftDialog.show();
	    };
	    var topCenterDialog=new Dialog("#ID-Dialog-TopCenter",{
			position:"top-center",
			animation:"zoom"
		});
		document.getElementById("topCenterBtn").onclick=function(){
			topCenterDialog.show();
	    };
	    var topRightDialog=new Dialog("#ID-Dialog-TopRight",{
			position:"top-right",
			animation:"zoom"
		});
		document.getElementById("topRightBtn").onclick=function(){
			topRightDialog.show();
	    };
	    var topFullDialog=new Dialog("#ID-Dialog-TopFull",{
			position:"top-center",
			animation:"slideDown",
			css:{width:"100%"}
		});
		document.getElementById("topFullBtn").onclick=function(){
			topFullDialog.show();
	    };

		//bottom
		var btmLeftDialog=new Dialog("#ID-Dialog-BtmLeft",{
			position:"bottom",
			animation:"zoom"
		});
		document.getElementById("bottomLeftBtn").onclick=function(){
			btmLeftDialog.show();
	    };
	    var btmCenterDialog=new Dialog("#ID-Dialog-BtmCenter",{
			position:"bottom-center",
			animation:"zoom"
		});
		document.getElementById("bottomCenterBtn").onclick=function(){
			btmCenterDialog.show();
	    };
	    var btmRightDialog=new Dialog("#ID-Dialog-BtmRight",{
			position:"bottom-right",
			animation:"zoom"
		});
		document.getElementById("bottomRightBtn").onclick=function(){
			btmRightDialog.show();
	    };
	    var bottomFullDialog=new Dialog("#ID-Dialog-BtmFull",{
			position:"bottom-center",
			animation:"slideUp",
			css:{width:"100%"}
		});
		document.getElementById("bottomFullBtn").onclick=function(){
			bottomFullDialog.show();
	    };

		//left
		var leftDialog=new Dialog("#ID-Dialog-LeftTop",{
			position:"left",
			animation:"slideRight"
		});
		document.getElementById("leftTopBtn").onclick=function(){
			leftDialog.show();
	    };
	    var leftMiddleDialog=new Dialog("#ID-Dialog-LeftMid",{
			position:"left-middle",
			animation:"slideRight"
		});
		document.getElementById("leftMiddleBtn").onclick=function(){
			leftMiddleDialog.show();
	    };
	    var leftBottomDialog=new Dialog("#ID-Dialog-LeftBtm",{
			position:"left-bottom",
			animation:"slideRight"
		});
		document.getElementById("leftBottomBtn").onclick=function(){
			leftBottomDialog.show();
	    };
	    var leftFullDialog=new Dialog("#ID-Dialog-LeftFull",{
			position:"left-middle",
			animation:"slideRight",
			css:{height:"100%"}
		});
		document.getElementById("leftFullBtn").onclick=function(){
			leftFullDialog.show();
	    };

		//right
		var rightTopDialog=new Dialog("#ID-Dialog-RightTop",{
			position:"right",
			animation:"slideLeft"
		});
		document.getElementById("rightTopBtn").onclick=function(){
			rightTopDialog.show();
	    };
	    var rightMiddleDialog=new Dialog("#ID-Dialog-RightMid",{
			position:"right-middle",
			animation:"slideLeft"
		});
		document.getElementById("rightMiddleBtn").onclick=function(){
			rightMiddleDialog.show();
	    };
	    var rightBottomDialog=new Dialog("#ID-Dialog-RightBtm",{
			position:"right-bottom",
			animation:"slideLeft"
		});
		document.getElementById("rightBottomBtn").onclick=function(){
			rightBottomDialog.show();
	    };
	    var rightFullDialog=new Dialog("#ID-Dialog-RightFull",{
			position:"right-middle",
			animation:"slideLeft",
			css:{height:"100%"}
		});
		document.getElementById("rightFullBtn").onclick=function(){
			rightFullDialog.show();
	    };

	    var shareContainer=document.getElementById("ID-Dialog-Share");
	    var shareDialog=new Dialog(shareContainer,{//弹出框
            position:"bottom",
            animation:"slideUp",
            css:{width:"100%"}
        });
	    document.getElementById("ID-BtnShare").onclick=function(e){
			shareDialog.show();
	    };
	    shareContainer.onclick=function(e){
			var target=e.target;
			if(target.getAttribute("data-share")){
                var shareTo=target.getAttribute("data-share");
                if(shareTo=="tsina"){
                    console.log("分享到新浪");
                }else if(shareTo=="weixin"){
                    console.log("分享到微信");
                }else if(shareTo=="fweixin"){
                    console.log("分享到朋友圈");
                }else if(shareTo=="qq"){
                    console.log("分享到QQ");
                }else if(shareTo=="tqq"){
                    console.log("分享到QQ微博");
                }else if(shareTo=="qzone"){
                    console.log("分享到QQ空间");
                }else if(shareTo=="phone"){
                    console.log("分享到手机联系人");
                }else if(shareTo=="link"){
                    console.log("复制链接");
                }else if(shareTo="close"){
                	 shareDialog.hide();
                }
            }
	    };
	    //定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>